
import 'package:flutter/material.dart';
import 'package:flutter_deer/res/resources.dart';
import 'package:flutter_deer/routers/fluro_navigator.dart';
import 'package:flutter_deer/util/theme_utils.dart';
import 'package:flutter_deer/util/toast.dart';
import 'package:flutter_deer/widgets/load_image.dart';

/// design/6店铺-账户/index.html#artboard13
class WithdrawalPasswordSettingDialog extends StatefulWidget {
  @override
  _WithdrawalPasswordSettingDialogState createState() => _WithdrawalPasswordSettingDialogState();
}

class _WithdrawalPasswordSettingDialogState extends State<WithdrawalPasswordSettingDialog> {
  
  var _list = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0, 0, 0];
  
  @override
  Widget build(BuildContext context) {
    return Container(
      color: ThemeUtils.getDialogBackgroundColor(context),
      height: MediaQuery.of(context).size.height * 7 / 10.0,
      child: Column(
        children: <Widget>[
          Stack(
            children: <Widget>[
              Container(
                width: double.infinity,
                alignment: Alignment.center,
                padding: const EdgeInsets.symmetric(vertical: 16.0),
                child: const Text(
                  '设置提现密码',
                  style: TextStyles.textBold18,
                ),
              ),
              Positioned(
                right: 16.0,
                top: 16.0,
                bottom: 16.0,
                child: Semantics(
                  label: '关闭',
                  child: GestureDetector(
                    onTap: () => NavigatorUtils.goBack(context),
                    child: const SizedBox(
                      key: const Key('close'),
                      height: 16.0,
                      width: 16.0,
                      child: const LoadAssetImage('goods/icon_dialog_close')
                    ),
                  ),
                ),
              ),
            ],
          ),
          Expanded(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Container(
                  height: 45.0,
                  margin: const EdgeInsets.only(left: 16.0, right: 16.0),
                  decoration: BoxDecoration(
                    border: Border.all(width: 0.6, color: Colours.text_gray_c),
                    borderRadius: BorderRadius.circular(4.0),
                  ),
                  child: Row(
                    children: List.generate(_codeList.length, (i) => _buildInputWidget(i))
                  ),
                ),
                Gaps.vGap10,
                Text(('提现密码不可为连续、重复的数字。'), style: Theme.of(context).textTheme.subtitle),
              ],
            ),
          ),
          Gaps.line,
          Container(
            color: Theme.of(context).dividerTheme.color,
            child: GridView.builder(
              shrinkWrap: true,
              physics: NeverScrollableScrollPhysics(),
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 3,
                childAspectRatio: 1.953,
                mainAxisSpacing: 0.6,
                crossAxisSpacing: 0.6
              ),
              itemCount: 12,
              itemBuilder: (_, index) {
                final color = ThemeUtils.isDark(context) ? Colours.dark_bg_gray : Colours.dark_button_text;
                return Material(
                  color: (index == 9 || index == 11) ? color : null,
                  child: InkWell(
                    child: Center(
                      child: index == 11 ? Semantics(label: '删除', child: const LoadAssetImage('account/del', width: 32.0)) : index == 9 ? Semantics(label: '无效', child: Gaps.empty) :
                      Text(_list[index].toString(), style: TextStyle(fontSize: 26.0)),
                    ),
                    onTap: () {
                      if (index == 9) {
                        return;
                      }
                      if (index == 11) {
                        if (_index == 0) {
                          return;
                        }
                        _codeList[_index - 1] = '';
                        _index--;
                        setState(() {

                        });
                        return;
                      }
                      _codeList[_index] = _list[index].toString();
                      _index++;
                      if (_index == _codeList.length) {

                        String code = '';
                        for (int i = 0; i < _codeList.length; i ++) {
                          code = code + _codeList[i];
                        }
                        Toast.show('密码：$code');
                        _index = 0;
                        for (int i = 0; i < _codeList.length; i ++) {
                          _codeList[i] = '';
                        }
                      }
                      setState(() {

                      });
                    },
                  ),
                );
              },
            ),
          ),
      ],
    ));
  }

  int _index = 0;
  List<String> _codeList = ['', '', '', '', '', ''];

  Widget _buildInputWidget(int p) {
    return Expanded(
      child: Container(
          alignment: Alignment.center,
          decoration: BoxDecoration(
              border: p != 5 ? Border(
                right: Divider.createBorderSide(context, color: Colours.text_gray_c, width: 0.6),
              ) : null
          ),
          child: Text(_codeList[p].isEmpty ? '' : '●', style: TextStyles.textSize12,)
      ),
    );
  }
}
